import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarChart = ({title}) => {
    const chartRef = useRef(null)
    useEffect(()=>{
        const chartDom = chartRef.current
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: title, // 主标题文本
                textStyle: { // 主标题样式
                    color: 'red'
                }
            },
            xAxis: {
                type: 'category',
                data: ['vue', 'react', 'angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150],
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);
    },[])
    return <div><div ref={chartRef} style={{width:'500px',height:'400px'}}></div></div>
}

export default BarChart